<template>
  <div class="view-design d-layout-container d-layout-container-dark">
    <div v-if="isShowHeader" class="design-header d-layout-header">
      <div class="design-name">{{ state.name }}</div>
      <div class="design-actions">
        <FormButton @click="handleBack">返回列表</FormButton>
      </div>
    </div>
    <div class="design-body d-layout-body d-bg-fog">
      <div class="design-render">
        <DRender :stock="stock" ref="drender" />
      </div>
    </div>
    <div class="view-actions">
      <span @click="handleEdit" class="item ani-opacity" title="编辑"><i class="el-icon-edit"></i></span>
    </div>
  </div>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, FormSelecter, FormButton } from '@daelui/vdog/dist/components.js'
import { parser, storeLocal } from '@daelui/dogjs/dist/components.js'
import { STATUS } from '@daelui/dogjs/dist/constant.js'
import DComponents from './dcomponents.vue'
import DRender from './drender.vue'
import DProperty from './dproperty.vue'
import stock, { state, setter } from '@/service/stock/index'
import vrSer from '@/service/action/viewrelease.action'
import vcSer from '@/service/action/viewcomp.action'
import componentCollection from './components/components'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter,
    FormButton,
    DComponents,
    DRender,
    DProperty
  },

  props: {
    isShowHeader: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      STATUS,
      // 表单数据
      state: {
        id: '',
        pid: '',
        name: '',
        meta: {},
        layout: '',
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      stock
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem ({ id, rid }) {
      vrSer.queryItemSaas({ vpid: id, id: rid }).then(result => {
        let data = result.data || {}
        if (!data.id) {
          data  = {
            "name":"预览",
            "path":"drill",
            "code":"",
            "description":"",
            "mid":"",
            "status":1,
            "order":1,
            "updateUser":"",
            "createUser":"",
            "layout":"ddesign-layout-fill",
            "meta":"{\"name\":\"ddesign-layout-fill\",\"properts\":{},\"layout\":{\"columns\":[{\"id\":1,\"colWidth\":\"auto\"}],\"rows\":[{\"id\":1,\"rowHeight\":\"auto\"}],\"margin\":{\"top\":\"0px\",\"right\":\"0px\",\"bottom\":\"0px\",\"left\":\"0px\"},\"padding\":{\"top\":\"8px\",\"right\":\"8px\",\"bottom\":\"8px\",\"left\":\"8px\"},\"areas\":[],\"rowGap\":\"8px\",\"colGap\":\"8px\",\"contrast\":{\"isAble\":true,\"bgColor\":\"#ffffff\"}},\"events\":{},\"resource\":{\"files\":[]},\"theme\":{},\"childComponents\":[]}",
            "version":"0.0.0",
            "labels":"",
            "id":"drill",
            "updateTime":1699510810630,
            "createTime":1699508381436
          }
          this.hasData = false
        }
        this.originData = data
        if (data.name) {
          document.title = data.name
        }
        this.resolve(data)
      }).finally(() => {
        // 加载本地
        this.loadLocal(id)
      })
    },

    // 加载本地
    loadLocal (id) {
      Promise.resolve(storeLocal.getItem(id)).then(res => {
        if (res && res.id) {
          this.isHasLocal = true
          this.resolve(res)
        } else if (this.hasData === false) {
          this.$message({
            type: 'warning',
            message: '未查询到版本内容,未发布版本或页面不存在',
            showClose: true
          })
        }
      })
    },

    // 解析元数据
    resolve (data) {
      // 组件元数据
      let meta = parser.parse(data.meta) || {
        component: 'div',
        name: data.layout || '',
        properts: {},
        layout: {},
        events: {},
        resource: {},
        theme: {},
        childComponents: []
      }
      meta.childComponents = meta.childComponents || []
      data.meta = meta
      this.state = data
      state.page = data
    },

    /**
     * @function 重置
    */
    handleReset () {

    },

    handleBack () {
      this.$router.push(this.getMicroRoute('/dview/page/list'))
    },

    // 编辑
    handleEdit () {
      window.open(this.getMicroPath('#/saas/practice/' + this.state.vpid))
    }
  },

  beforeMount () {
    // 查询所有视图组件
    vcSer.queryAllComponents({ isSaas: true }).then(cps => {
      componentCollection.push(...cps)
      setter.setComponentCollection(componentCollection)
    })
  },

  mounted () {
    let params = this.$route.params
    let query = this.$route.query
    this.loadItem({ id: params.id || 'tigerlair', rid: query.rid})
  }
}
</script>

<style lang="less" scoped>
.d-layout-container {
  & >.d-layout-body {
    min-height: 100vh;
  }
}
.view-design {
  width: 100%;
  .design-header {
    .design-name {
      float: left;
      display: flex;
      align-items: center;
      padding-left: 8px;
      height: 100%;
    }
    .design-actions {
      float: right;
      display: flex;
      height: 100%;
      align-items: center;
      padding-right: 8px;
      /deep/ .d-btn {
        margin-left: 8px;
      }
    }
  }
  .design-side {
    overflow: visible;
    width: 96px;
    .item-component {
      cursor: pointer;
    }
    .component-name {
      text-align: center;
    }
  }
  .design-property {
    overflow: visible;
    width: 512px;
  }
  .design-render {
    width: 100%;
  }
}
.view-actions {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999999;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #439eff;
    cursor: pointer;
    color: #439eff;
    font-size: 28px;
    text-align: center;
    opacity: .5;
  }
  &:hover {
    .item {
      opacity: 1;
    }
  }
}
.ani-opacity {
  animation: opa 1s infinite;
  animation-direction: alternate;
}
@keyframes opa {
  0% {
    opacity: .3
  }
  100% {
    opacity: 1
  }
}
</style>
